﻿@page "/Templates"

<PageTitle>@App.PageTitle("Templates")</PageTitle>

<h1><FluentIcon Value="@(new Icons.Regular.Size24.Classification())" /> Project templates</h1>

<p>
    To make it easier to start a project that uses the Fluent UI Web Components for Blazor out of the box, we have created the
    <a target="top" href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a> template package.
</p>
<p>
    The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps which mimic the regular Blazor
    templates. The Fluent UI Blazor components are already fully set up. If you choose to use the sample pages when creating a project,
    all components have been replaced with Fluent UI counterparts (and a few extra have been added). All Bootstrap styling is removed of course as well.
</p>
<p>
    If you want to use the Icon component with applications based on the templates, we have already included and set up the Icon package for you.
    The full collection of approximately 12 thousand icons in different variants and sizes can be browsed and searched from the <a href="/Icon">Icon</a> page.
</p>
<p>
    If you want to use the Emoji component with applications based on the templates, you still need to make some changes to the project. See the
    <a href="/IconsAndEmoji"> Icons and Emoji</a> page for more information.
</p>

<p>
    The pages created from these templates will appear like the following based on the type of project and options selected during creation.
</p>
<p style="display: flex; flex-direction:column; align-items:center">
	<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-home.png" alt="Home page for site created Fluent UI templates" />
    <br />
	<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-counter.png" alt="Counter page for site created Fluent UI templates" />
    <br />
	<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-weather.png" alt="Fetch data page for site created Fluent UI templates" />
</p>

<blockquote>
<strong>IMPORTANT!!</strong>
<p>Just as with the standard Blazor Web App template, Blazor will use SSR by default. If you want to have interactive components, make sure you add a rendermode to the app, page or component!</p>
</blockquote>

<h2 id="installation">Installation</h2>
<p>
	You can install the templates by running the following command:
</p>

<CodeSnippet>dotnet new install Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>

<p>
	The current version can be found on the <a href="https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/" rel="noopener noreferrer nofollow">NuGet site</a>.
</p>

<h2 id="usage">Usage</h2>
<p>
	After installing the templates, you can create a new project from either the CLI or by using the 'Creating a new project'-dialog in Visual Studio 2022.
</p>

<p>
	For creating a new Fluent Blazor Web App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazor -o {your project name}</CodeSnippet>

<p>
	For creating a Fluent Blazor WebAssembly Standalone App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazorwasm -o {your project name}</CodeSnippet>

<p>
	In Visual Studio you can create a new project by selecting either the 'Fluent Blazor Web App' template or the 'Fluent Blazor WebAssembly Standalone App'
	template in the 'File-&gt;New-&gt;Project'-dialog. It looks like this:
</p>
<p style="display: flex; justify-content:center">
	<img style="border: 1px solid var(--neutral-foreground-focus);" src="_content/FluentUI.Demo.Shared/images/newproject.png" alt="New project dialog with Fluent UI templates" />
</p>

<h3>Blazor Web App details</h3>
<p>
	The rendermode and interactivity choices made when creating an application with the template determine the behavior of the NavMenu and whether we include the web
	components script in <code>App.razor</code>. Starting with v4.2.1 of the templates, the result of that choices is described in the table below:

	<table width="90%">
		<thead>
			<tr>
				<th width="33%">Rendermode / Interactivity</th>
				<th width="33%">NavMenu @@rendermode</th>
				<th width="33%">NavMenu Collapsible</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>SSR / not applicable</td>
				<td>❌</td>
				<td>✅<sup>*</sup></td>
			</tr>
			<tr>
				<td>Server / Global</td>
				<td>❌</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>Server / Per Page</td>
				<td>✅</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>WebAssembly / Global<sup>**</sup></td>
				<td>❌</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>WebAssembly / Per Page<sup>**</sup></td>
				<td>✅</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>Auto / Global<sup>**</sup></td>
				<td>❌</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>Auto / Per Page<sup>**</sup></td>
				<td>✅</td>
				<td>✅</td>
			</tr>
		</tbody>
	</table>
</p>
<p>
	<em>* For expanding/collapsing items, this uses a JavaScript file that is only active when running in SSR mode.</em><br />
	<em>** The NavMenu component is located in the Client project.</em>
	</p>

<h2 id="uninstalling-the-templates">Uninstalling the templates</h2>

<p>
	If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
</p>

<CodeSnippet>dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>
